<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Bani Yas Travel</title>
    <link rel="stylesheet" type="text/css" href="{{asset('public/css/style.css')}}">
    <link rel="stylesheet" type="text/css" href="{{asset('public/css/index.css')}}">
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0">
</head>
<body>
<div class="wrapper">
    <div class="mask" v-show="mask"></div>
    <div class="modal" v-show="mask">
        <div class="model-heading">Login <span @click="mask=!mask">X</span></div>
        <div class="modal-body">
            Username:
            <input type="text" class="input" v-model="loginData.username"><br/><br/>
            Password:
            <input type="password" class="input" v-model="loginData.password">
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-submit" @click="login">Login</button>
        </div>
    </div>
    <div class="container">
        <aside class="side">
            <div class="item action">
                <ul class="nav">
                    <li v-if="loginStatus"><a href="javascript:void(0)" @click="mask=!mask">Login</a></li>
                    <li v-else>
                        <a href="javascript:void(0)" @click="logout()">Logout</a>
                        <div style="text-align: center">Username：@{{userData.username}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Password：@{{userData.role}}</div>
                    </li>
                </ul>
            </div>
            <div class="item form">
                <h1 role="heading" class="heading">Bani Yas Travel</h1>
                <div class="panel-content">
                    <form role="form">
                        <div class="form-group">
                            <input type="search" name="from" placeholder="From: " class="input">
                        </div>
                        <div class="form-group">
                            <input type="search" name="target" placeholder="Target: " class="input">
                        </div>
                        <div class="form-group form-content-right">
                            <button type="button" class="btn btn-submit">Get Routes</button>
                        </div>
                        <div class="form-group form-content-right">
                            <button @click="admin_schedule=!admin_schedule;admin_place=false" v-show="userData.role=='admin'" type="button" class="btn btn-submit">Admin Schedule</button>
                            <button @click="admin_place=!admin_place;admin_schedule=false" v-show="userData.role=='admin'" type="button" class="btn btn-submit">Admin Place</button>
                        </div>
                    </form>
                </div>
            </div>
            <div class="item panel-list">
                <ul class="result-list">
                    <li>
                        <ul class="result-detail">
                            <li>
                                <label>From: </label>
                                <p>Lorem ipsum dolor sit amet sit.</p>
                            </li>
                            <li>
                                <label>To: </label>
                                <p>-</p>
                            </li>
                            <li>
                                <label>Time Schedule: </label>
                                <p>-</p>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <ul class="result-detail">
                            <li>
                                <label>From: </label>
                                <p>-</p>
                            </li>
                            <li>
                                <label>To: </label>
                                <p>-</p>
                            </li>
                            <li>
                                <label>Time Schedule: </label>
                                <p>-</p>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <ul class="result-detail">
                            <li>
                                <label>From: </label>
                                <p>-</p>
                            </li>
                            <li>
                                <label>To: </label>
                                <p>-</p>
                            </li>
                            <li>
                                <label>Time Schedule: </label>
                                <p>-</p>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </aside>
        <main class="map">
            <div class="map-container">
                <div class="svg" v-show="!admin_place && !admin_schedule">
                    <img src="{{asset('public/svg/map.svg')}}">
                    <svg width="1280" height="800">
                        <text v-for="v in placeData" :x="v.x-60" :y="v.y-15">@{{v.name}}</text>
                        <g v-for="v in placeData" style="opacity: 0" ref="svg">
                            <rect :x="v.x-200" :y="v.y-180" rx='5' ry="5" width="500" height="150" />
                            <image :href="'public/img/'+v.image_path" :x="v.x-180" :y="v.y-175" width="160" height="150" />
                            <foreignObject :x="v.x" :y="v.y-165" width="250" style="font-size: 14px;color: #fff;">
                                @{{ v.description }}
                            </foreignObject>
                        </g>
                        <circle @click="gShow(i)" v-for="v,i in placeData" :cx="v.x" :cy="v.y" r="5" fill="#000" />
                    </svg>
                </div>
                <div class="admin_place" v-show="admin_place&&!admin_schedule">
                    <table rules="all">
                        <tr>
                            <th>Id</th>
                            <th>name</th>
                            <th>latitude</th>
                            <th>longitude</th>
                            <th>x</th>
                            <th>y</th>
                            <th>image_path</th>
                            <th>description</th>
                            <th>operation</th>
                        </tr>
                        <tr v-for="v in placeData">
                            <td>@{{v.id}}</td>
                            <td>@{{v.name}}</td>
                            <td>@{{v.latitude}}</td>
                            <td>@{{v.longitude}}</td>
                            <td>@{{v.x}}</td>
                            <td>@{{v.y}}</td>
                            <td>@{{v.image_path}}</td>
                            <td><div class="desc">@{{v.description}}</div></td>
                            <td>
                                <button type="button" @click="placeEdit(v)" class="btn btn-submit">Edit</button>
                                <button type="button" @click="placeDel(v.id)" class="btn btn-submit">Del</button>
                            </td>
                        </tr>
                    </table>
                    <table rules="all" class="add" >
                        <tr>
                            <th colspan="9">Create</th>
                        </tr>
                        <tr>
                            <th>Id</th>
                            <th>name</th>
                            <th>latitude</th>
                            <th>longitude</th>
                            <th>x</th>
                            <th>y</th>
                            <th>image_path</th>
                            <th>description</th>
                            <th>operation</th>
                        </tr>
                        <tr>
                            <td>default</td>
                            <td><input type="text" v-model="addPlace.name"></td>
                            <td><input type="text" v-model="addPlace.latitude"></td>
                            <td><input type="text" v-model="addPlace.longitude"></td>
                            <td><input type="text" v-model="addPlace.x"></td>
                            <td><input type="text" v-model="addPlace.y"></td>
                            <td><input type="file" accept="image/*" ref="image"></td>
                            <td><input type="text" v-model="addPlace.description"></td>
                            <td>
                                <button type="button" @click="createPlace" class="btn btn-submit">Create</button>
                            </td>
                        </tr>
                    </table>

                    <table rules="all" class="add" v-show="editC">
                        <tr>
                            <th colspan="9">Edit</th>
                        </tr>
                        <tr>
                            <th>Id</th>
                            <th>name</th>
                            <th>latitude</th>
                            <th>longitude</th>
                            <th>x</th>
                            <th>y</th>
                            <th>image_path</th>
                            <th>description</th>
                            <th>operation</th>
                        </tr>
                        <tr>
                            <td>@{{editPlace.id}}</td>
                            <td><input type="text" v-model="editPlace.name"></td>
                            <td><input type="text" v-model="editPlace.latitude"></td>
                            <td><input type="text" v-model="editPlace.longitude"></td>
                            <td><input type="text" v-model="editPlace.x"></td>
                            <td><input type="text" v-model="editPlace.y"></td>
                            <td><input type="file" accept="image/*" ref="editImage"></td>
                            <td><input type="text" v-model="editPlace.description"></td>
                            <td>
                                <button type="button" @click="subEdit" class="btn btn-submit">Submit</button>
                            </td>
                        </tr>
                    </table>
                </div>
                <div class="admin_schedule" v-show="admin_schedule&&!admin_place">
                    <table rules="all" class="add" >
                        <tr>
                            <th colspan="9">Create</th>
                        </tr>
                        <tr>
                            <th>Id</th>
                            <th>type</th>
                            <th>line</th>
                            <th>from_place_id</th>
                            <th>to_place_id</th>
                            <th>departure_time</th>
                            <th>arrival_time</th>
                            <th>distance</th>
                            <th>speed</th>
                            <th>status</th>
                            <th>operation</th>
                        </tr>
                        <tr>
                            <td>default</td>
                            <td><input type="text" v-model="addScheData.type"></td>
                            <td><input type="text" v-model="addScheData.line"></td>
                            <td><input type="text" v-model="addScheData.from_place_id"></td>
                            <td><input type="text" v-model="addScheData.to_place_id"></td>
                            <td><input type="text" v-model="addScheData.departure_time"></td>
                            <td><input type="text" v-model="addScheData.arrival_time"></td>
                            <td><input type="text" v-model="addScheData.distance"></td>
                            <td><input type="text" v-model="addScheData.speed"></td>
                            <td><input type="text" v-model="addScheData.status"></td>
                            <td>
                                <button type="button" @click="createSchedule" class="btn btn-submit">Create</button>
                            </td>
                        </tr>
                    </table><br/><br/><br/>
                    <table rules="all" class="scheduleList">
                        <tr>
                            <th>Id</th>
                            <th>type</th>
                            <th>line</th>
                            <th>from_place_id</th>
                            <th>to_place_id</th>
                            <th>departure_time</th>
                            <th>arrival_time</th>
                            <th>distance</th>
                            <th>speed</th>
                            <th>status</th>
                            <th>operation</th>
                        </tr>
                        <tr v-for="v in scheduleData">
                            <td>@{{v.id}}</td>
                            <td>@{{v.type}}</td>
                            <td>@{{v.line}}</td>
                            <td>@{{v.from_place_id}}</td>
                            <td>@{{v.to_place_id}}</td>
                            <td>@{{v.departure_time}}</td>
                            <td>@{{v.arrival_time}}</td>
                            <td>@{{v.distance}}</td>
                            <td>@{{v.speed}}</td>
                            <td>@{{v.status}}</td>
                            <td>
                                <button type="button" @click="scheduleDel(v.id)" class="btn btn-submit">Del</button>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        </main>
    </div>
</div>

    <script src="{{asset('public/js/vue.js')}}"></script>
    <script src="{{asset('public/js/index.js')}}"></script>
</body>
</html>